<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./jquery-2.1.0.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">  
       .body{
       	width: 1000px;
       	border: 1px solid red;
       	margin: 0 auto;
        height:100%
       }

       .head{
         height: 300px;
         border: 1px solid yellow;
       }
       .head_menu li{
        display: block;
        float: right;
        width: 80px;
        height: 80px;
        margin-right: 20px;
       line-height: 80px;
       }
        .head_menu li a{
        	text-decoration: none;

         }

       .zpjs{
        border: 1px solid blue;
        width: 300px;
        height: 300px;
        text-align: center;
       }
       .content{
   /*    	height: 600px;*/
       height: auto;
       	border: 1px solid pink;
       }
       .content_card{
       	width: 100px;
        overflow: hidden;
        border:4px solid red;
        width:600px;
        position: relative;
        left: 50%;
        margin-left: -300px;

       }
       .card_vip{
       	width: 200px;
       	position: relative;
       	left: 50%;
       	margin-left: -100px;
       	font-size: 20px;
       	font-weight: bold;
       	margin-bottom: 40px;
       }

       .zpjs{
       	width: 293px;
       	float:left;    
       }
       .footer{
       	clear: both;
       	height: 100px;
        border: 1px solid orange;
       }
       .footer_about{
       	border: 1px solid black;
       	position: absolute;
       	width: 500px;
       	overflow: hidden;
       	left: 50%;
       	margin-left: -250px;
       }
       .footer_record{
         width: 300px;
         position: absolute;
         margin-top:70px;
         left: 50%;
         margin-left: -150px;
       }
       .footer li{
       	display: block;
       	float: left;
       	width: 100px;
       	height: 100px;
       	line-height: 100px;

       	text-align: center;
       }
       .footer li a{
       	  	text-decoration: none;
       }
       #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
   /*     #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}  */
         .alert{
             width: 400px;
             height: 280px;
             background-color: white; z-index:1002;
             position:absolute;
             border:3px solid green;
             background: white;
             top:50%;
             left:50%;
          /*   margin-left:3300px;*/
         /*    margin-top: 140px;*/
             margin-top: -140px;
             margin-left: -200px;
         /*    margin:0 auto;*/
            }
           .user_custom{
            background:  #FBFBFB;
            border: 1px solid blue;
            margin: 20px;
            float: left;
            text-align: center;
           }
    </style>
    <script type="text/javascript">
         function showdiv() {
           document.getElementById("bg").style.display ="block";
            document.getElementById("show").style.display ="block";
            // body.style.height="100px";
           unScroll();

         }
         //禁止使用滚动条
         function unScroll() {
            var top = $(document).scrollTop();
            $(document).on('scroll.unable',function (e) {
             $(document).scrollTop(top);
            })
             }
            function hidediv() {
                  document.getElementById("bg").style.display ='none';
                  document.getElementById("show").style.display ='none';
           }
    </script>
</head>
<body>
 <div class="body">
 	<div class="head">
 		 <div class="head_menu">
          <li><a href="#">关于我们</a></li>
          <li><a href="#" onclick="showdiv();">商户/用户</a></li>
          <li><a href="#">主页</a></li>
     </div>
 	 </div>
 	<div class="content">
	    <img src="">
	     <div class="content_card">
	    	     <div class="card_vip">
	    	     	 <span>电子会员卡</span>
	    	     </div>                 
		    	  <div class="zpjs">
			         <h5>图<h5>
			        <h6>作品介绍、作品介绍</h6>
			        <h6>作品介绍、作品介绍</h6>
			        <h6>作品介绍、作品介绍</h6>
			        <h6>作品介绍、作品介绍</h6>
		        </div>
		        <div class="zpjs">
		        	<img src="" width:292px height:292px >
		        </div>
			     <div class="zpjs">
				 	     <h5>图</h5>
				        <h6>作品介绍、作品介绍</h6>
				        <h6>作品介绍、作品介绍</h6>
				        <h6>作品介绍、作品介绍</h6>
				        <h6>作品介绍、作品介绍</h6>
			     </div>
			      <div class="zpjs">
		        	 <img src="" width:292px height:292px >
		        </div>
	    </div>
	   
  </div>
	  <div class="footer">
	  	<div class="footer_about">
	  	 <li><a href="#">关于我们</a></li><li><a href="#">商务合作</a></li><li><a href="#">  联系邮箱</a></li><li><a href="#">法律说明</a></li>
	  	 </div>
	  	  <div class="footer_record">
	  	  	 	 <span>备案号码：浙ICP备 16023334号 </span>
	  	  </div>	 
	  </div>

 </div>
   <div id="bg">
   </div>
<!--    <div id="show"> -->
    <div id="show" style="display: none" class="alert">
      <div class="user_custom">
        <p>
          <img src="" width="150px" height="150px" ><br>
            商家
        </p>
      </div>
      <div class="user_custom">
        <p>
          <img src="" width="150px" height="150px" ><br>
           个人
        </p>
      </div>
    </div>
</body>
</html>

 
